<template> 
	<view> 
		<view class="page"> 
			<comp-common v-bind="{data:data}"></comp-common> 
			<comp-header v-bind="{data:data}"></comp-header> 
			<view @click="hideMoreAlert" class="body after-navber"> 
				<view class="top-bar"> 
					 
					<view class="flex-row tab-bar"> 
					    <view class="flex-grow-1"> 
					        <navigator :class="data.status==0?'active':''" openType="redirect" url="/pages/order/order?status=0"> 
					            <text>待付款</text> 
					        </navigator> 
					    </view> 
					    <view class="flex-grow-1"> 
					        <navigator :class="data.status==1?'active':''" openType="redirect" url="/pages/order/order?status=1"> 
					            <text>待发货</text> 
					        </navigator> 
					    </view> 
						</view> 
					 
					<view class="search"> 
						<input @confirm="searchSubmit" confirmType="search" name="keyword" placeholder="搜索"></input> 
					</view> 
					<view class="flex flex-row tab-bar"> 
						<navigator class="flex-grow-1 flex-x-center" openType="redirect" url="/store/m/goods/goods?status=1"> 
							<view :class="data.status==1?'active':''">出售中</view> 
						</navigator> 
						<navigator class="flex-grow-1 flex-x-center" openType="redirect" url="/store/m/goods/goods?status=2"> 
							<view :class="data.status==2?'active':''">售磬</view> 
						</navigator> 
						<navigator class="flex-grow-1 flex-x-center" openType="redirect" url="/store/m/goods/goods?status=3"> 
							<view :class="data.status==3?'active':''">仓库中</view> 
						</navigator> 
						<navigator class="flex-grow-1 flex-x-center" openType="redirect" url="/store/m/goods/goods?status=4"> 
							<view :class="data.status==4?'active':''">最新</view> 
						</navigator> 
					</view> 
				</view> 
				<view class="goods-list"> 
					<view class="goods-item flex flex-row" v-for="(item,index) in data.goods_list" :key="index"> 
						<view class="flex-grow-0" style="padding: 24upx"> 
							<image :src="item.cover_pic" style="width: 150upx;height: 150upx;border: 1upx solid #eee"></image> 
						</view> 
						<view class="flex-grow-1" style="padding: 24upx 24upx 24upx 0"> 
							<view class="goods-name"> 
								<view>{{item.name}}</view> 
							</view> 
							<view style="color: #ff4544">￥{{item.price}}</view> 
							<view class="flex flex-row"> 
								<view class="flex-grow-1" style="color: #888">库存：{{item.goods_num}}</view> 
								<view class="flex-grow-1" style="color: #888" v-if="data.__is_sales">销量：{{item.sale_num}}</view> 
								<view class="flex-grow-0 more-btn"> 
									<view> 
										<view @click="showMoreAlert" class="more-icon flex flex-y-center" :data-index="index"> 
											<view> 
												<view></view> 
												<view></view> 
												<view></view> 
											</view> 
										</view> 
									</view> 
									<view class="more-alert" :class="[item.show_alert?'show':'']"> 
										<view class="flex flex-row"> 
											<view class="flex-grow-0 more-alert-item" v-if="false"> 
												<view> 
													<image src="../../../static/store/icon-bianji.png"></image> 
												</view> 
												<view>编辑</view> 
											</view> 
											<view @click="setGoodsStatus" class="flex-grow-0 more-alert-item" :data-index="index" data-target-status="1" 
											 v-if="item.status==0"> 
												<view> 
													<image src="../../../static/store/icon-xiajia.png" style="transform: rotate(180deg)"></image> 
												</view> 
												<view>上架</view> 
											</view> 
											<view @click="setGoodsStatus" class="flex-grow-0 more-alert-item" :data-index="index" data-target-status="0" 
											 v-if="item.status==1"> 
												<view> 
													<image src="../../../static/store/icon-xiajia.png"></image> 
												</view> 
												<view>下架</view> 
											</view> 
											<view @click="goodsDelete" class="flex-grow-0 more-alert-item" :data-index="index"> 
												<view> 
													<image src="../../../static/store/icon-shanchu.png"></image> 
												</view> 
												<view>删除</view> 
											</view> 
											<view class="flex-grow-0 more-alert-item" v-if="false"> 
												<view> 
													<image src="../../../static/store/icon-tuiguang.png"></image> 
												</view> 
												<view>推广</view> 
											</view> 
										</view> 
									</view> 
								</view> 
							</view> 
						</view> 
					</view> 
				</view> 
				<view class="flex-y-center flex-x-center" style="text-align: center;height: 174upx;color: #888;font-size: 9pt" v-if="data.no_goods">暂无商品 
				</view> 
				<view class="flex-y-center flex-x-center" style="text-align: center;height: 74upx;color: #888;font-size: 9pt" v-if="!data.no_goods&&data.no_more_goods">已无更多商品 
				</view> 
				<view class="loading-more " :class="[data.loading_more?'show':'']" v-if="!data.no_goods&&!data.no_more_goods"> 
					<image :src="data.__wxapp_img.system.loading_black.url" style="width: 50upx;height: 50upx"></image> 
				</view> 
			</view> 
	<comp-footer v-bind="{data:data}"></comp-footer> 
		</view> 
 
	</view> 
</template> 
 
<script>var myVue = {}; 
	export default { 
		data() { 
			return { 
				data: { 
					status: 1, 
					goods_list: [], 
					no_goods: !1, 
					no_more_goods: !1 
				}, 
			}; 
		}, 
		onLoad: function(t) {myVue = this; 
			myVue.getApp.page.onLoad(this, t); 
			var o = this; 
			o.setData({ 
				status: parseInt(t.status || 1), 
				loading_more: !0 
			}), o.loadGoodsList(function() { 
				o.setData({ 
					loading_more: !1 
				}); 
			}); 
		}, 
		onReady: function() { 
			myVue.getApp.page.onReady(this); 
		}, 
		onShow: function() { 
			myVue.getApp.page.onShow(this); 
		}, 
		onHide: function() { 
			myVue.getApp.page.onHide(this); 
		}, 
		onUnload: function() { 
			myVue.getApp.page.onUnload(this); 
		}, 
		onPullDownRefresh: function() {}, 
		onReachBottom: function(t) { 
			var o = this; 
			o.data.loading_more || (o.setData({ 
				loading_more: !0 
			}), o.loadGoodsList(function() { 
				o.setData({ 
					loading_more: !1 
				}); 
			})); 
		}, 
		methods: { 
			searchSubmit: function(t) { 
				var o = this, 
					a = t.detail.value; 
				o.setData({ 
					keyword: a, 
					loading_more: !0, 
					goods_list: [], 
					current_page: 0 
				}), o.loadGoodsList(function() { 
					o.setData({ 
						loading_more: !1 
					}); 
				}); 
			}, 
			goodsDelete: function(t) { 
				var o = this, 
					a = t.currentTarget.dataset.index; 
				o.getApp.core.showModal({ 
					title: "警告", 
					content: "确认删除该商品？", 
					success: function(t) { 
						t.confirm && (o.getApp.core.showLoading({ 
							title: "正在处理", 
							mask: !0 
						}), o.getApp.request({ 
							url: o.getApp.api.store.goods.delete, 
							data: { 
								id: o.data.goods_list[a].id 
							}, 
							success: function(t) { 
								o.showToast({ 
									title: t.msg 
								}), 0 == t.code && (o.data.goods_list.splice(a, 1), o.setData({ 
									goods_list: o.data.goods_list 
								})); 
							}, 
							complete: function() { 
								o.getApp.core.hideLoading(); 
							} 
						})); 
					} 
				}); 
			}, 
			loadGoodsList: function(t) { 
				var o = this; 
				if (o.data.no_goods || o.data.no_more_goods) "function" == typeof t && t(); 
				else { 
					var a = (o.data.current_page || 0) + 1; 
					o.getApp.request({ 
						url: o.getApp.api.store.goods.list, 
						data: { 
							page: a, 
							status: o.data.status, 
							keyword: o.data.keyword || "" 
						}, 
						success: function(t) { 
							0 == t.code && (1 != a || t.data.list && t.data.list.length || o.setData({ 
								no_goods: !0 
							}), t.data.list && t.data.list.length ? (o.data.goods_list = o.data.goods_list || [], 
								o.data.goods_list = o.data.goods_list.concat(t.data.list), o.setData({ 
									goods_list: o.data.goods_list, 
									current_page: a 
								})) : o.setData({ 
								no_more_goods: !0 
							})); 
						}, 
						complete: function() { 
							"function" == typeof t && t(); 
						} 
					}); 
				} 
			}, 
			showMoreAlert: function(o) { 
				var a = this; 
				setTimeout(function() { 
					var t = o.currentTarget.dataset.index; 
					a.data.goods_list[t].show_alert = !0, a.setData({ 
						goods_list: a.data.goods_list 
					}); 
				}, 50); 
			}, 
			hideMoreAlert: function(t) { 
				var o = this, 
					a = !1; 
				for (var s in o.data.goods_list) o.data.goods_list[s].show_alert && (a = !(o.data.goods_list[s].show_alert = !1)); 
				a && setTimeout(function() { 
					o.setData({ 
						goods_list: o.data.goods_list 
					}); 
				}, 100); 
			}, 
			setGoodsStatus: function(t) { 
				var o = this, 
					a = t.currentTarget.dataset.targetStatus, 
					s = t.currentTarget.dataset.index; 
				o.getApp.core.showLoading({ 
					title: "正在处理", 
					mask: !0 
				}), o.getApp.request({ 
					url: o.getApp.api.store.goods.set_status, 
					data: { 
						id: o.data.goods_list[s].id, 
						status: a 
					}, 
					success: function(t) { 
						0 == t.code && (o.data.goods_list[s].status = t.data.status, o.setData({ 
							goods_list: o.data.goods_list 
						})), o.showToast({ 
							title: t.msg, 
							duration: 1500 
						}); 
					}, 
					complete: function() { 
						o.getApp.core.hideLoading(); 
					} 
				}); 
			} 
 
		} 
		 
 
	} 
</script> 
 
<style scoped> 
	.after-navber { 
		padding-top: 208upx; 
	} 
 
	.top-bar { 
		position: fixed; 
		top: 0; 
		left: 0; 
		width: 100%; 
		background: #fff; 
		border-bottom: 1upx solid #e3e3e3; 
		z-index: 10; 
	} 
 
	.search { 
		background: #EFEFF4; 
		border-top: 1upx solid #e3e3e3; 
		border-bottom: 1upx solid #e3e3e3; 
		padding: 24upx 32upx; 
		width: 100%; 
	} 
 
	.search input { 
		background: #fff; 
		border: 1upx solid #eee; 
		border-radius: 999upx; 
		text-align: center; 
		height: 70upx; 
		font-size: 9pt; 
		width: 100%; 
	} 
 
	.tab-bar navigator view { 
		height: 90upx; 
		line-height: 90upx; 
		border-bottom: 4upx solid transparent; 
	} 
 
	.tab-bar navigator view.active { 
		border-color: #ff4544; 
		color: #ff4544; 
	} 
 
	.goods-list { 
		background: #fff; 
	} 
 
	.goods-list .goods-item { 
		border-top: 1upx solid #eeeeee; 
		font-size: 9pt; 
	} 
 
	.goods-list .goods-name { 
		position: relative; 
		height: 76upx; 
		line-height: 38upx; 
	} 
 
	.goods-list .goods-name>view { 
		position: absolute; 
		left: 0; 
		right: 0; 
		top: 0; 
		display: -webkit-box; 
		-webkit-box-orient: vertical; 
		-webkit-line-clamp: 2; 
		overflow: hidden; 
	} 
 
	.goods-list .more-btn { 
		position: relative; 
		width: 70upx; 
	} 
 
	.goods-list .more-icon { 
		position: absolute; 
		right: 0; 
		bottom: -13upx; 
		width: 70upx; 
		height: 70upx; 
	} 
 
	.goods-list .more-icon>view { 
		width: 100%; 
		text-align: center; 
		font-size: 0; 
	} 
 
	.goods-list .more-icon>view>view { 
		width: 10upx; 
		height: 10upx; 
		background: #888; 
		border-radius: 999upx; 
		display: inline-block; 
		margin: 0 3upx; 
	} 
 
	.goods-list .more-alert { 
		position: absolute; 
		background: rgba(0, 0, 0, .75); 
		color: #fff; 
		bottom: calc(100% + 10upx); 
		right: 0; 
		border-radius: 8upx; 
		visibility: hidden; 
		opacity: 0; 
		transition: 150ms; 
	} 
 
	.goods-list .more-alert.show { 
		visibility: visible; 
		opacity: 1; 
	} 
 
	.goods-list .more-alert:after { 
		display: inline-block; 
		position: absolute; 
		content: " "; 
		width: 0; 
		height: 0; 
		right: 20upx; 
		border: 15upx solid rgba(0, 0, 0, .75); 
		border-left-color: transparent; 
		border-right-color: transparent; 
		border-bottom-color: transparent; 
	} 
 
	.goods-list .more-alert-item { 
		padding: 20upx 0; 
		width: 110upx; 
		text-align: center; 
		font-size: 7pt; 
		line-height: 1; 
	} 
 
	.goods-list .more-alert-item image { 
		width: 40upx; 
		height: 40upx; 
		margin-bottom: 10upx; 
	} 
 
	.loading-more { 
		font-size: 0; 
		text-align: center; 
		padding: 12upx; 
		opacity: .5; 
		visibility: hidden; 
		transition: 150ms; 
	} 
 
	.loading-more.show { 
		visibility: visible; 
		opacity: 1; 
	} 
</style> 
